<template>
  <div class="item">
    <span class="name">分类</span>
    <ul class="list m-t-1 fx">
      <li
        class="l-item cs"
        :class="{ active: i === activeIndex }"
        v-for="(item, i) in sorts"
        :key="i"
        @click="select(i)"
      >
        {{ item }}
      </li>
    </ul>
    <span class="name">添加标签</span>
    <div class="add-tag m-t-1">
      <a-button v-if="!isInp" @click="selectTag"> + 添加标签</a-button>
      <Mention v-else @changeInp='changeInp'></Mention>
    </div>
  </div>
</template>

<script>
import Mention from "@/components/article/Header/Mention";
import { getSessionStorage, parse } from "@/utils/utils";
export default {
  name: "PostSort",
  data() {
    return {
      sorts: [
        "后端",
        "前端",
        "Android",
        "iOS",
        "人工智能",
        "开发工具",
        "代码人生",
        "阅读",
      ],
      isInp: false,
      activeIndex: 0,
    };
  },
  methods: {
    onSearch(_, prefix) {
      // 只有当输入prefix的时候才会触发
      this.prefix = prefix;
    },
    changeInp() {
      this.isInp = true;
    },
    selectTag() {
      this.isInp = true;
    },
    select(i) {
      this.activeIndex = i;
      this.$bus.$emit("sort", this.sorts[i]); // 触发分类标签
    },
  },
  created() {
    this.$bus.$on("getSort", (sort) => {
      this.activeIndex = this.sorts.indexOf(sort);
      this.isInp = true;
    });
  },
  mounted() {
    this.$bus.$emit("sort", this.sorts[this.activeIndex]); // 默认触发一次，防止用户没选择
  },
  components: {
    Mention,
  },
};
</script>

<style lang="scss" scoped>
.item {
  color: #909090;
  .name {
    font-size: 2rem;
  }
  .list {
    flex-wrap: wrap;
    .l-item {
      border: 1px solid #f1f1f1;
      padding: 0.5rem;
      margin-right: 1rem;
      margin-bottom: 1rem;
      font-size: 1.3rem;
      &:hover,
      &.active {
        color: #007fff;
        border: 1px solid #007fff;
        background-color: rgba(0, 127, 255, 0.05);
      }
    }
  }
  .add-tag {
    button {
      color: #909090;
      font-size: 1.1rem;
    }
  }
}
</style>